<template>
  <div class="content">
    <div class="toolbox-title">
      <div style="font-family: '微软雅黑'; font-size: 18px; font-weight: bold"
        >订单交付情况
      </div>
      <div class="toolbox-box">
        <a-space direction="vertical" fill>
          <div>
            <div>已完成</div>
            <div><a-progress status="success" :percent="0.2" /></div>
          </div>
          <div>
            <div>未完成</div>
            <div><a-progress :percent="0.2" /></div>
          </div>
          <div>
            <div>已延期</div>
            <div><a-progress status="danger" :percent="0.2" /></div>
          </div>
        </a-space>
      </div>
    </div>

    <!-- <div> </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const menu = [];
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 180px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .toolbox {
      &-title {
        width: 100%;
        height: 20%;
        padding: 15px;
      }
      &-box {
        padding: 15px;
      }
    }
  }
</style>
